<template>
  <div class="comment-container">
    <LayoutHeaderTitle title="去评价">
      <template #right>
        <van-button
          color="linear-gradient(to right,#fb9b0c,#ff2929)"
          round
          size="small"
          class="right-btn"
          @click="submit"
        >
          发布
        </van-button>
      </template>
    </LayoutHeaderTitle>
    <div class="list" v-if="orderInfo.list">
      <ul>
        <li v-for="item in orderInfo.list" :key="item.b_id" class="cl">
          <div v-for="i in item.goods" :key="i.spec_id">
            <div class="title cl">
              <img class="img" :src="i.g_src | formatSrc" :alt="i.g_name" />
              <p class="text-over">{{ i.g_name }}</p>
              <p class="text-over spec">{{ i.spec_name }}</p>
            </div>
            <div class="rate">
              <span class="lable">商品评分</span>
              <van-rate
                v-model="
                  commentInfo[item.b_id]['goods'][i.spec_id]['goods_rate']
                "
              />
              <span
                class="tip"
                v-show="
                  rate[commentInfo[item.b_id]['goods'][i.spec_id]['goods_rate']]
                "
                v-text="
                  rate[commentInfo[item.b_id]['goods'][i.spec_id]['goods_rate']]
                "
              />
            </div>
            <van-field
              v-model="commentInfo[item.b_id]['goods'][i.spec_id]['content']"
              rows="5"
              class="no-padding"
              autosize
              type="textarea"
              placeholder="多个角度评价宝贝，可以帮助更多想买的人"
            />
          </div>

          <div class="store">
            <p class="title">{{ item.b_name }}</p>

            <div class="rate">
              <span class="lable">商家评分</span>
              <van-rate v-model="commentInfo[item.b_id]['store_rate']" />
              <span
                class="tip"
                v-show="rate[commentInfo[item.b_id]['store_rate']]"
                v-text="rate[commentInfo[item.b_id]['store_rate']]"
              />
            </div>
            <div class="rate">
              <span class="lable">物流评分</span>
              <van-rate v-model="commentInfo[item.b_id]['express_rate']" />
              <span
                class="tip"
                v-show="rate[commentInfo[item.b_id]['express_rate']]"
                v-text="rate[commentInfo[item.b_id]['express_rate']]"
              />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  middleware: "authenticated",
  layout: "notabbar",
  async asyncData({ params, from, redirect, app }) {
    const { id } = params;
    if (!id && !from) return redirect({ name: "index" });
    if (!id) return redirect(from);
    let orderInfo = {},
      commentInfo = {};
    try {
      const { data } = await app.$apiGetOrderInfo({ order_id: id });
      orderInfo = data;
      data.list.forEach(item => {
        commentInfo[item.b_id] = {
          store_rate: null,
          express_rate: null,
          goods: {}
        };
        item.goods.forEach(
          i =>
            (commentInfo[item.b_id]["goods"][i.spec_id] = {
              content: "",
              goods_rate: 5,
              g_id: i.g_id,
              order_detail_id: i.order_detail_id
            })
        );
      });
    } catch (error) {
      console.log(error);
    }
    return {
      orderInfo,
      id,
      commentInfo
    };
  },
  data: () => ({
    id: null,
    orderInfo: {},
    commentInfo: {},
    rate: {
      "1": "很差",
      "2": "差",
      "3": "一般",
      "4": "好",
      "5": "很好"
    }
  }),
  methods: {
    getCommentData() {
      let data = [];
      Object.keys(this.commentInfo).forEach(k => {
        const item = this.commentInfo[k];
        Object.keys(item.goods).forEach(g => {
          const i = item.goods[g];
          data.push({
            b_id: k,
            express_rate: item.express_rate,
            store_rate: item.store_rate,
            g_id: i.g_id,
            spec_id: g,
            content: i.content,
            goods_rate: i.goods_rate,
            order_detail_id: i.order_detail_id
          });
        });
      });
      let flag = data.every(
        item => item.express_rate && item.store_rate && item.content
      );
      return flag && data;
    },
    submit() {
      const data = this.getCommentData();
      if (!data) {
        return this.$toast({
          message: "请完成评价内容\n再确定提交",
          type: "fail"
        });
      }
      this.$apiSubmitComment({
        order_id: this.orderInfo.order_id,
        data
      }).then(res => {
        const { status, msg } = res;
        if (status === 0) {
          this.$toast({ type: "success", message: msg });
          setTimeout(() => {
            this.$router.go(-1);
          }, 1000);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.comment-container {
  background: #efefef;
  padding-top: 50px;
  ::v-deep .header {
    background: inherit;
    color: #000;
  }
  .no-padding {
    padding: 0;
    &::after {
      border: 0;
    }
  }
  .right-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
    right: 10px;
  }
  .list {
    min-height: calc(100vh - 50px);
    box-sizing: border-box;
    padding-bottom: 20px;
    li {
      border-radius: 10px;
      padding: 10px;
      margin-top: 20px;
      background: #fff;
    }
  }
  .title {
    font-size: 14px;
    color: #7e7e7e;
    p {
      margin: 0 0 10px;
    }
    .img {
      width: 50px;
      float: left;
      margin-right: 10px;
    }
    .spec {
      font-size: 12px;
      margin-bottom: 0;
    }
  }
  .rate {
    font-size: 14px;
    display: flex;
    align-items: center;
    margin: 5px 0;
    .tip {
      margin-left: 100px;
      color: #ee0a24;
    }
    .lable {
      margin-right: 10px;
      color: #7e7e7e;
    }
    ::v-deep .van-icon {
      vertical-align: middle;
    }
    ::v-deep .van-rate__item {
      padding-right: 10px;
    }
  }
  ::v-deep .van-rate {
    font-size: 16px;
  }
}
</style>
